<style type="text/css">
.hs_content .form-control{width:100%;}
.hs_content tr .form-group{width: 100%;margin: 0px;}
.hs_content .control-label{padding-right: 0px;padding-left: 0px; width: auto;}
.hs_content tr .del{margin-left: 5px;}
</style>
<script type="text/javascript" src="__PUBLIC__/libs/vue/vue.min.js"></script>
<div class="container" style="padding-top: 50px;">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form class="form-horizontal" role="form" id="post_form" action="{:U('')}">
                <div class="form-group">
                    <label for="title" class="col-sm-1 control-label">标题:<span style="color: red;">*</span></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" name="title" id="title" value="{$info['title']|default=''}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sort" class="col-sm-1 control-label">排序:<span style="color: red;">*</span></label>
                    <div class="col-sm-9">
                        <input type="min" class="form-control" name="sort"  value="{$info['sort']|default=''}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="status" class="col-sm-1 control-label">状态:<span style="color: red;">*</span></label>
                    <div class="col-sm-9">
                        <label class="radio-inline">
                          <input type="radio" name="status" value="1" <if condition="$info['status'] eq 1">checked</if>>开启
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="status" value="0" <if condition="$info['status'] neq 1">checked</if>>关闭
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">话术内容:<span style="color: red;">*</span></label>
                    <div class="col-sm-9 hs_content">
                        <template v-for="(content, i) in contents">
                            <table class="table table-bordered form-inline">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <label class="col-sm-1 control-label" style="width: auto;">标题:</label>
                                                <div class="col-sm-8">
                                                    <div>
                                                        <input type="text" class="form-control" :name="'contents['+i+'][title]'" v-model="content.title"/>
                                                    </div>
                                                </div>
                                                <div class="col-sm-3" style="padding: 0px;">
                                                    <button class="btn btn-default" type="button" @click="addWd(i)">添加对话</button>
                                                    <button type="button"  @click="delContent(i)" class="del btn btn-default">删除</button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <template v-for="(wd, wdIndex) in content.wds">
                                        <tr>
                                            <td>
                                                <div class="form-group">
                                                    <label class="col-sm-1 control-label">对话:</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" :name="'contents['+i+'][wds]['+wdIndex+'][text]'" v-model="wd.text"/>
                                                    </div>
                                                    <div class="col-sm-3" style="padding: 0px;">
                                                        <label class="radio-inline">
                                                          <input type="radio" :name="'contents['+i+'][wds]['+wdIndex+'][type]'" v-model="wd.type" value="1">问
                                                        </label>
                                                        <label class="radio-inline">
                                                          <input type="radio" :name="'contents['+i+'][wds]['+wdIndex+'][type]'" v-model="wd.type" value="2">答
                                                        </label>
                                                        <button type="button" @click="delWd(i, wdIndex)" class="del btn btn-default">删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- <td>
                                                <div class="form-group">
                                                    <label class="col-sm-1 control-label">回答:</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" :name="'contents['+i+'][wds]['+wdIndex+'][d]'" v-model="wd.d"/>
                                                    </div>
                                                </div>
                                            </td> -->
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </template>
                        <button class="btn btn-default" @click="addContent" type="button">添加话术内容</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-10">
                         <input type="hidden" name="id" value="{$info.id}">
                        <button type="button" class="btn btn-primary" id="btn" lng="0" lat="0">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#btn").click(function () {
            var $form = $("#post_form");
            var $data = {};
            var $form_data = $form.serializeArray();
            $.each($form_data, function (k, v) {
                $data[v.name] = v.value;
            });
            $.post($form.attr('action'), $data, function (obj) {
                alert(obj.m);
                if (obj.s) {
                    if (typeof (obj.url) != "undefined" && obj.url) {
                        location.href = obj.url;
                    }
                }
            });
            return false;
        });
    });
    var app = new Vue({
        el:".container",
        data:{
            contents:{:json_encode($info['contents'])}
        },
        methods:{
            addWd: function(i){
                var len = this.contents[i].wds.length;
                var type = 1;
                if(len >= 1){
                    if(this.contents[i].wds[len-1].type == 1){
                        type = 2;
                    }
                }
                this.contents[i].wds.push({text:'',type:type});
            },
            delWd: function(i, wdIndex){
                this.contents[i].wds.splice(wdIndex, 1);
            },
            addContent: function(){
                this.contents.push({title:'', wds:[{text:'',type:1}]});
            },
            delContent: function(i){
                this.contents.splice(i, 1);
            },
        },
        created:function(){

        }
    });
</script>